<template>
	<view>
		<u-navbar :is-back="true" :title="title"></u-navbar>
		<view class="content">
			<view class="search-wrapper">
				<u-search placeholder="请输入订单编号/服务名称/用户昵称" @search="search" @custom="search" shape="round" height="70" bg-color="#fff" :show-action="false" v-model="param.param"></u-search>
			</view>
			<view class="top">
				<view class="today f-c-sb">
          <view>{{ titleArr[0] }}：{{ todayTotal.todayEntryCount }}</view>
          <view>{{ titleArr[1] }}：￥{{ todayTotal.todayEntryMoney }}</view>
        </view>
				<view class="total f-c-sb">
					<view class="all">
						<span>{{selDate}}</span>
            <u-picker
                mode="time"

                v-model="startShow"
                :params="dataParams"
                end-year="2100"
                @confirm="confirmTime"
                title="请选时间"
            ></u-picker>
            <u-icon name="arrow-down" padding-left="20" color="#131313" size="25" @click="selTime"></u-icon>
          </view>
          <view>{{ titleArr[2] }}：{{ entryCount }}</view>
          <view>{{ titleArr[3] }}：￥{{ entryMoney }}</view>
        </view>
			</view>
			<u-empty v-if="!listDate.length" mode="list"></u-empty>
			<scroll-view
			  scroll-y="true"
			  style="height: 70vh;"
			  @scrolltolower="onreachBottom">
				<view class="formBox" v-for="(item,index) in listDate" :key="index">
					<view class="tip tip1">{{item.typeStr}}</view>
					<view class="orderList">
            <view class="label"><span class="Title">订单编号：</span><span>{{ item.no }}</span></view>
            <view class="label"><span class="Title">服务名称：</span><span>{{ item.name }}</span></view>
            <view class="label"><span class="Title">用户昵称：</span><span>{{ item.customerName }}</span></view>
            <view class="labelMoney" v-if='param.moneyType==1'>支付金额：<span>￥{{ item.orderAmount }}</span></view>
            <view class="labelMoney" v-if='param.moneyType==1'>入账金额：<span>￥{{ item.settlementAmount }}</span></view>
            <view class="labelTime" v-if='param.moneyType==1'>入账时间：<span>{{ item.settlementTime }}</span></view>
            <view class="label" v-if='param.moneyType==2 || param.moneyType==3'>
              <span>收款门店：</span><span>{{ item.collectionStore }}</span></view>
            <view class="labelMoney" v-if='param.moneyType==2'>待结算金额：<span>{{ item.writePrice }}</span></view>
            <view class="labelMoney" v-if='param.moneyType==3'>已结算金额：<span>{{ item.settlementAmount }}</span></view>
            <view class="labelMoney" v-if='param.moneyType==4'>收入佣金金额：<span>{{ item.settlementAmount }}</span></view>
            <view class="labelMoney" v-if='param.moneyType==5'>收入金额：<span>{{ item.settlementAmount }}</span></view>
            <view class="f-c-sb">
              <view v-if="item.statusStr&&item.statusStr!='--'" style="color: #337ab7;"
                    @click="switchingState(item.settlementStatus)">
                {{ item.statusStr }}
              </view>
              <view v-else></view>
              <view class="f-c-fe">
                <view class="btn" @tap="openOrderShowInfo(item.settlementId,item.id)">详情</view>
                <view v-if="param.moneyType==2" class="btn btnEnd">结算</view>
              </view>

            </view>
          </view>
				</view>
				<u-loadmore v-if="!param.noData && listDate.length != 0" :status="'nomore'" :load-text="{ nomore: '没有更多数据了' }" />
			</scroll-view>
			
		</view>
	  
	</view>
</template>

<script>
import {incomeList, todayIncome} from '@/api/my';
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
      title: '',
      titleArr: [],
      param: {
        moneyType: 1,
        month: '',
        orderType: 3,
        pageNo: 1,
        pageSize: 10,
        storeBasicId: '',
        storeBasicType: 0,
        year: '',
        noData: true,
					param:''
				},
				todayParam:{
					storeBasicId:'',
					moneyType:'',
					orderType: 3,
					storeBasicType:''
				},
				dataParams: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false	
				},
				startShow: false,
				todayTotal:{},
				listDate:[],
				status: 'loadmore',//初始加载状态
				state: 1,
				selDate:'',
				entryCount:0,
				entryMoney:0
			};
		},
		computed:{
			    ...mapGetters(["userInfo"]),
		
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		    this.param.storeBasicId=this.userInfo.storeBasicId;
			this.todayParam.storeBasicId=this.userInfo.storeBasicId;
		    this.param.storeBasicType=this.userInfo.storeBasicType;
			this.todayParam.storeBasicType=this.userInfo.storeBasicType;
			// JSON.parse() 由JSON字符串转换为JSON对象
			let objParam=JSON.parse(option.param);
			this.param.moneyType=parseInt(objParam.type);
			this.todayParam.moneyType=objParam.type;
			this.param.year=new Date().getFullYear();
			this.param.month=new Date().getMonth()+1;
			this.selDate = new Date().getFullYear() + '年' + (new Date().getMonth()+1) +'月';
			switch(this.param.moneyType){
        case 1:
          this.title = '洗车订单-入账订单';
          this.titleArr = ['今日入账订单数', '今日入账总金额', '入账订单数', '入账金额']

          break;
        case 2:
          this.title = '洗车订单-待结算订单';
          this.titleArr = ['今日待结算订单数', '今日待结算金额', '待结算订单数', '待结算金额']

          break;
        case 3:
          this.title = '洗车订单-已结算订单';
          this.titleArr = ['今日已结算订单数', '今日已结算金额', '已结算订单数', '已结算金额']

          break;
        case 4:
          this.title = '洗车订单-佣金订单';
          this.titleArr = ['今日收入佣金订单数', '今日收入佣金金额', '已收入佣金订单数', '已收入佣金金额']

          break;
        case 5:
          this.title = '洗车订单-收入订单';
          this.titleArr = ['今日收入订单数', '今日收入金额', '已收入订单数', '已收入金额']

          break;
        default:
          this.title = '洗车订单收入明细';
			}
			this.init();
		},
		methods:{
			init(){
				this.getList();
				this.getToday();
			},
			getToday(){
				todayIncome(this.todayParam).then(res=>{
					this.todayTotal=res.data;
					console.log(res);
				})
			},
			selTime(){
				this.startShow = true;
      },
      confirmTime(e) {
        this.selDate = e.year + '年' + parseInt(e.month) + '月';
        this.param.year = e.year;
        this.param.month = e.month;
        this.param.pageNo = 1;
        this.listDate = [];

        this.getList();
      },
      switchingState(status) {
        if (this.param.moneyType == 1) {
          if (status == 2) {
            this.param.moneyType = 3
            this.title = '洗车订单-已结算订单'
          } else {
            this.param.moneyType = 2
            this.title = '洗车订单-待结算订单'
          }
          this.init()
        }

      },
      search(value) {
        this.param.noData = true;
        this.param.pageNo = 1;
        this.getList();
      },
      getList() {
        console.log(this.param);

        incomeList(this.param).then(res => {
          console.log(res.entryCount);
					this.entryCount=res.data.entryCount;
					this.entryMoney=res.data.entryMoney;
					if (this.param.pageNo==1) {
						this.listDate=res.data.incomeListVos; 
					} else {
						this.listDate=this.listDate.concat(res.data.incomeListVos);
					}
					// this.param.pageNo += 1;
					if (this.param.pageSize != res.data.length) {
						this.param.noData = false;
					}

        })
      },
      // scroll-view到底部加载更多
      onreachBottom() {
        if (this.param.noData) {
          uni.showLoading({});
          this.getList();
        }
      },
      openOrderShowInfo(settlementId, id) {
        this.$navigateTo('/pages/my/washCardetailsShow', {
          id,
          settlementId,
          moneyType: this.param.moneyType,
          orderType: this.param.orderType
        });
      }
    }
	}
</script>

<style lang="less">
	.content{
		width: 100%;
		min-height: 100vh;
		background-color: #ededed;
		padding-top:20rpx;
		padding-bottom:20rpx;
		.top{
			width: 660rpx;
			margin: 0 auto 40rpx;
			.today{
				color: #131313;
				line-height: 36px;
				font-size: 24rpx;
			}
			.total{
				color: #131313;
				font-size: 22rpx;
				text-align: center;
			}
			.all{
				font-size: 24rpx;
				span{
					margin-right:15rpx;
				}
			}
		}
		.search-wrapper{
			width: 660rpx;
			margin: 10rpx auto;
		}
		.formBox{
			position: relative;
			width: 660rpx;
			padding:80rpx 26rpx 26rpx;
			margin-top: 0;
			margin-bottom: 20rpx;
			.tip{
				position: absolute;
				top:20rpx;
				left:0;
				padding:0 15rpx;
				border-radius: 0 28rpx 28rpx 0;
				color: #ffffff;
				line-height: 56rpx;
				font-size: 24rpx;
				margin-bottom:20rpx;
			}
			.tip1{
				background: #ff9a41;
			}
			.tip2{
				background: #ff4166;
			}
			.tip3{
				background: #2bc1ff;
			}
			.subtitle{
				line-height: 60rpx;
				font-size: 32rpx;
				color: #777;
			}
			.label {
        display: flex;
        justify-content: space-between;
        padding: 28rpx 0;
        font-size: 28rpx;
        color: #666666;
        border-bottom: 1px solid #ededed;

        span:last-child {
          color: #131313;
        }

      }

      .Title {
        min-width: 155rpx;

      }

      .labelMoney {
        line-height: 85rpx;
        font-size: 28rpx;
        color: #666666;
        border-bottom: 1px solid #ededed;

        span {
          color: #ff6738;

        }
				
			}
			.labelTime{
				line-height: 85rpx;
				font-size: 28rpx;
				color: #666666;
				border-bottom: 1px solid #ededed;
				span{
					color: #131313;
				}
				
			}
			.btn{
				margin-top:20rpx;
				width: 180rpx;
				background: #177fff;
				border-radius: 33rpx; 
				color: #ffffff;
				line-height: 66rpx;
				font-size: 32rpx;
				text-align: center;
			}
			.btnEnd{
				background-color: #C4C4C4;
				margin-left: 15rpx;
			}
		}
		.formBox:last-child{
			margin-bottom: 0;
		}
	
	}
	
    
</style>
